Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Release/v2.0.2 #877

Merged
merged 9 commits into from Jun 30, 2020
Merged

Release/v2.0.2 #877

merged 9 commits into from Jun 30, 2020

Conversation

mlaursen
Copy link
Owner

@mlaursen mlaursen commented Jun 26, 2020

Tree shaking improvements with Webpack + sideEffects and build speed improvements

See: https://webpack.js.org/guides/tree-shaking/

Summary, new sideEffects field helps with dead code elimination with webpack and helps build performance since it doesn't need to parse it with terser.

I tested a really simple example in CRA that was just:

 import React from "react";
 import logo from "./logo.svg";
+import { Button } from "react-md";
 import "./App.css";

 function App() {
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <p>
           Edit <code>src/App.js</code> and save to reload.
         </p>
+        <Button>Hello</Button>
 import React from "react";
 import ReactDOM from "react-dom";
+import "react-md/dist/css/react-md.blue-teal-400-dark.min.css";
 import "./index.css";

The tests were run by triggering a production build with and without the react-md styles being included. I think these stats will be negligible once more components are being used, but here's the few results with my MacBook.

Current build stats:

# without css
# average build time ~12s
File sizes after gzip:

  205.54 KB  build/static/js/2.646bee91.chunk.js
  777 B      build/static/js/runtime-main.b9cd606a.js
  682 B      build/static/js/main.909a8f83.chunk.js
  547 B      build/static/css/main.5f361e03.chunk.css
# with css
# average build time ~13s
File sizes after gzip:

  205.54 KB  build/static/js/2.06a718b5.chunk.js
  15.84 KB   build/static/css/2.c416ebf1.chunk.css
  777 B      build/static/js/runtime-main.b9cd606a.js
  685 B      build/static/js/main.5a2d7e96.chunk.js
  547 B      build/static/css/main.5f361e03.chunk.css

With "sideEffects": ["dist/**/*"]:

# without css
# average build time ~8s
File sizes after gzip:

  45.79 KB (-159.75 KB)  build/static/js/2.5e21dda9.chunk.js
  777 B                  build/static/js/runtime-main.b9cd606a.js
  672 B (-10 B)          build/static/js/main.5c471371.chunk.js
  547 B                  build/static/css/main.5f361e03.chunk.css

# stats compared to previous without css build
# with css
# average build time ~9
File sizes after gzip:

  45.8 KB (-159.75 KB)  build/static/js/2.043fb57c.chunk.js
  15.84 KB              build/static/css/2.c416ebf1.chunk.css
  777 B                 build/static/js/runtime-main.b9cd606a.js
  673 B (-12 B)         build/static/js/main.5e1aaad3.chunk.js
  547 B                 build/static/css/main.5f361e03.chunk.css

# stats compared to previous with css build

NextJS build stats for documentation site

Note: These stats were done with my Ubuntu VM, so might need to do a few more tests.

# first build 478s
# second and beyond: 430s
# output
Page                                                           Size     First Load JS
┌ λ /                                                          19.9 kB         374 kB
├   └ css/268b679267ffff25dada.css                             974 B
├   /_app                                                      38.5 kB         327 kB
├ λ /404                                                       5.31 kB         332 kB
├   └ css/10afbba6b68121eefa8f.css                             357 B
├ λ /about                                                     2.23 kB         354 kB
├ λ /api/search
├ λ /blog                                                      14.9 kB         366 kB
├   └ css/8a4aa7f60200cf7a376f.css                             724 B
├ λ /blog/[id]                                                 4.77 kB         356 kB
├ λ /colors-and-theming                                        395 B           327 kB
├ λ /colors-and-theming/color-palette                          7.78 kB         359 kB
├   └ css/57507f78a58d2d58dfd1.css                             4.14 kB
├ λ /colors-and-theming/creating-dynamic-themes                3.88 kB         355 kB
├ λ /colors-and-theming/overriding-defaults                    2.72 kB         354 kB
├ λ /colors-and-theming/theme-builder                          7.69 kB         359 kB
├   └ css/94621517ce255142d9f3.css                             693 B
├ λ /guides/[id]                                               4.94 kB         357 kB
├ λ /packages/[id]/changelog                                   5.17 kB         357 kB
├ λ /packages/[id]/installation                                5.19 kB         357 kB
├   └ css/b29cd56faf2e570a7306.css                             670 B
├ λ /packages/[id]/sassdoc                                     10.2 kB         365 kB
├   └ css/fec261ab3a2c3a005c84.css                             1.24 kB
├ λ /packages/alert/demos                                      6.31 kB         370 kB
├   └ css/c36f8cc4c5a59a4c1042.css                             1.29 kB
├ λ /packages/app-bar/demos                                    5.42 kB         369 kB
├   └ css/a6acc8269d1d191da74d.css                             1.71 kB
├ λ /packages/autocomplete/demos                               4.9 kB          371 kB
├   └ css/0efc0d7bb55579191a72.css                             1.35 kB
├ λ /packages/avatar/demos                                     2.83 kB         367 kB
├   └ css/da30e45f059dfd10f7eb.css                             1.32 kB
├ λ /packages/badge/demos                                      2.74 kB         366 kB
├   └ css/6815553b840ef0485beb.css                             1.35 kB
├ λ /packages/button/demos                                     3.21 kB         367 kB
├   └ css/e3cf9c0a483efb7a990c.css                             1.39 kB
├ λ /packages/card/demos                                       5.13 kB         369 kB
├   └ css/096eeffc0b3f5d14a922.css                             1.33 kB
├ λ /packages/chip/demos                                       8.44 kB         372 kB
├   └ css/109faca6ec398689e145.css                             2.06 kB
├ λ /packages/dialog/demos                                     6.66 kB         370 kB
├   └ css/9ab4939600305a91ba36.css                             1.6 kB
├ λ /packages/divider/demos                                    2.07 kB         366 kB
├   └ css/4d34ca70f0dae5fff241.css                             1.31 kB
├ λ /packages/elevation/demos                                  1.82 kB         366 kB
├   └ css/8a329b159f9cb78f0e4a.css                             2.32 kB
├ λ /packages/expansion-panel/demos                            5.64 kB         369 kB
├ λ /packages/form/demos                                       12.5 kB         376 kB
├   └ css/d820d2c78773b7d7a2ad.css                             1.84 kB
├ λ /packages/icon/demos                                       3.2 kB          367 kB
├   └ css/9a6d7e88d2539e60e3ce.css                             1.36 kB
├ λ /packages/layout/demos                                     2.58 kB         366 kB
├ λ /packages/link/demos                                       3.66 kB         367 kB
├   └ css/60cc5ded38612f35e49a.css                             1.32 kB
├ λ /packages/list/demos                                       3.59 kB         367 kB
├   └ css/c55e364de16fd4bab7c9.css                             1.51 kB
├ λ /packages/material-icons/demos                             1.45 kB         365 kB
├   └ css/53c7477b2c2bb78bc72e.css                             1.41 kB
├ λ /packages/media/demos                                      2.08 kB         366 kB
├   └ css/06cb8b75ab36e20cf39b.css                             1.26 kB
├ λ /packages/menu/demos                                       47.2 kB         414 kB
├   └ css/3ff34016e124f9c0d382.css                             1.61 kB
├ λ /packages/overlay/demos                                    2.1 kB          366 kB
├   └ css/3cd5ed205b1bfd15d54f.css                             1.43 kB
├ λ /packages/portal/demos                                     2.38 kB         366 kB
├   └ css/ea788914000780a6dcd6.css                             1.39 kB
├ λ /packages/progress/demos                                   5.43 kB         369 kB
├   └ css/a24e75806aa73bf973a6.css                             1.7 kB
├ λ /packages/sheet/demos                                      4.08 kB         368 kB
├   └ css/d56155adbdb087b92934.css                             1.27 kB
├ λ /packages/states/demos                                     2.47 kB         366 kB
├   └ css/b762173f6050adf29211.css                             1.83 kB
├ λ /packages/table/demos                                      8.15 kB         375 kB
├   └ css/d4625eb2b87cac0db42f.css                             1.46 kB
├ λ /packages/tabs/demos                                       8.35 kB         377 kB
├   └ css/7de5090fce2612f15dc9.css                             1.47 kB
├ λ /packages/theme/demos                                      950 B           365 kB
├   └ css/093063f55dce42449357.css                             1.48 kB
├ λ /packages/tooltip/demos                                    6.89 kB         371 kB
├   └ css/30a4c0cb3adbbb825030.css                             1.34 kB
├ λ /packages/transition/demos                                 8.74 kB         377 kB
├   └ css/593313136aa86570cd57.css                             1.71 kB
├ λ /packages/tree/demos                                       7.13 kB         371 kB
├   └ css/fe19ab750d7fcab866a8.css                             1.42 kB
├ λ /packages/typography/demos                                 1.93 kB         366 kB
├ λ /packages/utils/demos                                      5.84 kB         370 kB
├   └ css/a1f0a02d12bbd8aa215f.css                             1.74 kB
└ λ /sandbox                                                   9.65 kB         365 kB
    └ css/079902791836cf2976e4.css                             1.49 kB
+ First Load JS shared by all                                  327 kB
  ├ static/pages/_app.js                                       38.5 kB
  ├ chunks/2288faefbc39bb8cad4a79f33d83c26d1b464796.898424.js  5.02 kB
  ├ chunks/2938d6dec954af172b809cf2034c61d115a8c4e5.df4383.js  5.52 kB
  ├ chunks/2cd72420bc3d381e050fee679fd8fef19cac328b.df544f.js  7.56 kB
  ├ chunks/2edb282b.f2e762.js                                  24.5 kB
  ├ chunks/389b6c657382946dca826de30d975bc758996f48.dfdc8c.js  10.6 kB
  ├ chunks/3b43b2b671bb5829a9d82b12d373791c9a79e37c.802ff0.js  3.05 kB
  ├ chunks/53ece0ec2b3d5802e6fe83f2c35d264ef1732ccc.5df9fb.js  6.49 kB
  ├ chunks/57d45951498279ca56a052e5c0455770babf4986.e32206.js  5.81 kB
  ├ chunks/76365a1ab49cd52a6b1a7377a085e0b7977c4d24.3585bb.js  2.52 kB
  ├ chunks/8c359eece28ea1621f3b32d53e1329e2069f2d62.a31540.js  4.75 kB
  ├ chunks/commons.8ef994.js                                   10.7 kB
  ├ chunks/d0572bf8717b98e861c4cf0303a3f65e4d938b28.c05b53.js  120 kB
  ├ chunks/d77ccaf5402f40498d945c29f5a3f9d8e786fde5.603dfa.js  4.17 kB
  ├ chunks/db5a4e5d62c3d7214b2e3dc4cd2bf32ce7e9f82e.fe6a4e.js  2.78 kB
  ├ chunks/e1e790f983d4df87fb7d58edce092dba42cfd0e2.e2f339.js  5.25 kB
  ├ chunks/e48c192230f2d041a34e72858e412cf1b60727fb.67c463.js  17.9 kB
  ├ chunks/framework.eb23ff.js                                 40.3 kB
  ├ runtime/main.aef066.js                                     6.27 kB
  ├ runtime/webpack.af081f.js                                  5.18 kB
  └ css/b702ed6739ce11f6236d.css                               17.4 kB

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)

WIth sideEffects: ["dist/**/*"]

# first build 432s
# second and beyond: 411s
# output
Page                                                           Size     First Load JS
┌ λ /                                                          21.1 kB         244 kB
├   └ css/268b679267ffff25dada.css                             974 B
├   /_app                                                      42.4 kB         194 kB
├ λ /404                                                       6.03 kB         200 kB
├   └ css/10afbba6b68121eefa8f.css                             357 B
├ λ /about                                                     2.23 kB         222 kB
├ λ /api/search
├ λ /blog                                                      14.5 kB         234 kB
├   └ css/8a4aa7f60200cf7a376f.css                             724 B
├ λ /blog/[id]                                                 4.75 kB         225 kB
├ λ /colors-and-theming                                        395 B           195 kB
├ λ /colors-and-theming/color-palette                          8.13 kB         228 kB
├   └ css/57507f78a58d2d58dfd1.css                             4.14 kB
├ λ /colors-and-theming/creating-dynamic-themes                3.87 kB         224 kB
├ λ /colors-and-theming/overriding-defaults                    2.72 kB         223 kB
├ λ /colors-and-theming/theme-builder                          10.1 kB         233 kB
├   └ css/94621517ce255142d9f3.css                             693 B
├ λ /guides/[id]                                               4.92 kB         225 kB
├ λ /packages/[id]/changelog                                   5.16 kB         225 kB
├ λ /packages/[id]/installation                                5.16 kB         225 kB
├   └ css/b29cd56faf2e570a7306.css                             670 B
├ λ /packages/[id]/sassdoc                                     12.8 kB         235 kB
├   └ css/fec261ab3a2c3a005c84.css                             1.24 kB
├ λ /packages/alert/demos                                      9.93 kB         246 kB
├   └ css/c36f8cc4c5a59a4c1042.css                             1.29 kB
├ λ /packages/app-bar/demos                                    6.46 kB         242 kB
├   └ css/a6acc8269d1d191da74d.css                             1.71 kB
├ λ /packages/autocomplete/demos                               8.96 kB         247 kB
├   └ css/0efc0d7bb55579191a72.css                             1.35 kB
├ λ /packages/avatar/demos                                     3.15 kB         239 kB
├   └ css/da30e45f059dfd10f7eb.css                             1.32 kB
├ λ /packages/badge/demos                                      3.61 kB         239 kB
├   └ css/6815553b840ef0485beb.css                             1.35 kB
├ λ /packages/button/demos                                     4.49 kB         240 kB
├   └ css/e3cf9c0a483efb7a990c.css                             1.39 kB
├ λ /packages/card/demos                                       5.91 kB         242 kB
├   └ css/096eeffc0b3f5d14a922.css                             1.33 kB
├ λ /packages/chip/demos                                       12.7 kB         248 kB
├   └ css/109faca6ec398689e145.css                             2.06 kB
├ λ /packages/dialog/demos                                     9.86 kB         246 kB
├   └ css/9ab4939600305a91ba36.css                             1.6 kB
├ λ /packages/divider/demos                                    3.17 kB         239 kB
├   └ css/4d34ca70f0dae5fff241.css                             1.31 kB
├ λ /packages/elevation/demos                                  1.81 kB         238 kB
├   └ css/8a329b159f9cb78f0e4a.css                             2.32 kB
├ λ /packages/expansion-panel/demos                            9.92 kB         246 kB
├ λ /packages/form/demos                                       18.2 kB         262 kB
├   └ css/d820d2c78773b7d7a2ad.css                             1.84 kB
├ λ /packages/icon/demos                                       6.72 kB         246 kB
├   └ css/9a6d7e88d2539e60e3ce.css                             1.36 kB
├ λ /packages/layout/demos                                     5.07 kB         244 kB
├ λ /packages/link/demos                                       3.41 kB         239 kB
├   └ css/60cc5ded38612f35e49a.css                             1.32 kB
├ λ /packages/list/demos                                       4.38 kB         240 kB
├   └ css/c55e364de16fd4bab7c9.css                             1.51 kB
├ λ /packages/material-icons/demos                             124 kB          360 kB
├   └ css/53c7477b2c2bb78bc72e.css                             1.41 kB
├ λ /packages/media/demos                                      2.08 kB         238 kB
├   └ css/06cb8b75ab36e20cf39b.css                             1.26 kB
├ λ /packages/menu/demos                                       51.6 kB         293 kB
├   └ css/3ff34016e124f9c0d382.css                             1.61 kB
├ λ /packages/overlay/demos                                    4.29 kB         240 kB
├   └ css/3cd5ed205b1bfd15d54f.css                             1.43 kB
├ λ /packages/portal/demos                                     4.52 kB         240 kB
├   └ css/ea788914000780a6dcd6.css                             1.39 kB
├ λ /packages/progress/demos                                   8.73 kB         244 kB
├   └ css/a24e75806aa73bf973a6.css                             1.7 kB
├ λ /packages/sheet/demos                                      6.89 kB         246 kB
├   └ css/d56155adbdb087b92934.css                             1.27 kB
├ λ /packages/states/demos                                     2.46 kB         238 kB
├   └ css/b762173f6050adf29211.css                             1.83 kB
├ λ /packages/table/demos                                      9.06 kB         255 kB
├   └ css/d4625eb2b87cac0db42f.css                             1.46 kB
├ λ /packages/tabs/demos                                       13.1 kB         255 kB
├   └ css/7de5090fce2612f15dc9.css                             1.47 kB
├ λ /packages/theme/demos                                      940 B           237 kB
├   └ css/093063f55dce42449357.css                             1.48 kB
├ λ /packages/tooltip/demos                                    6.79 kB         242 kB
├   └ css/30a4c0cb3adbbb825030.css                             1.34 kB
├ λ /packages/transition/demos                                 11.1 kB         257 kB
├   └ css/593313136aa86570cd57.css                             1.71 kB
├ λ /packages/tree/demos                                       9.12 kB         245 kB
├   └ css/fe19ab750d7fcab866a8.css                             1.42 kB
├ λ /packages/typography/demos                                 1.93 kB         238 kB
├ λ /packages/utils/demos                                      11.5 kB         247 kB
├   └ css/a1f0a02d12bbd8aa215f.css                             1.74 kB
└ λ /sandbox                                                   10.4 kB         237 kB
    └ css/079902791836cf2976e4.css                             1.49 kB
+ First Load JS shared by all                                  194 kB
  ├ static/pages/_app.js                                       42.4 kB
  ├ chunks/2edb282b.b9cbc7.js                                  24.5 kB
  ├ chunks/6a3c0b79590998d990a4d67aa759890de67585be.7dffda.js  6.27 kB
  ├ chunks/6ff7e5eb402d30887e5ef9a4a3f77ad4217a28a8.e33cb8.js  7.04 kB
  ├ chunks/70fc2cfd4c3cba81c18a10949c530c67ce35f936.71b4e7.js  9.84 kB
  ├ chunks/7361ee74a08f14a3d1888229b7be2bf35d358edc.559a6d.js  3.63 kB
  ├ chunks/925c5c349f92fbdc8a1be4465f9bf0035c23a7fb.c785e0.js  5.88 kB
  ├ chunks/a35fb7ace7bf86ed5b89572c1bee1b85219c17dd.2d399b.js  6.35 kB
  ├ chunks/ac2b4c873b781bd6aede5102dc0ba170bc1d695e.c5268c.js  2.27 kB
  ├ chunks/b8f0f6376804f15668fdaa58a0eadb6f3b1f164a.f256db.js  5.31 kB
  ├ chunks/bbfab6fb48deef1dc1be64cf565a9759c5010d2d.2d8aa8.js  5.22 kB
  ├ chunks/bd24f111ca7fece56831ce59431ed6d52c06baba.23c102.js  3.03 kB
  ├ chunks/c01f237278dec583cc8c1c6e734e854c92f5fd71.53d671.js  5.01 kB
  ├ chunks/ce19620d0338f951938cc11686450a1a7795a20e.a89a1c.js  2.2 kB
  ├ chunks/commons.8ef994.js                                   10.7 kB
  ├ chunks/fbebb5c0e2ec516423da390c5f2cd55e43bed5ae.fe6a4e.js  2.78 kB
  ├ chunks/framework.eb23ff.js                                 40.3 kB
  ├ runtime/main.bf28ef.js                                     6.27 kB
  ├ runtime/webpack.c01f6f.js                                  5.17 kB
  └ css/b702ed6739ce11f6236d.css                               17.4 kB

λ  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)
○  (Static)  automatically rendered as static HTML (uses no initial props)
●  (SSG)     automatically generated as static HTML + JSON (uses getStaticProps)

So there is a 9.62% build time decrease for a "clean" next build (478 s to 432 s) and a 4.42% decrease for subsequent builds (430 s to 411 s). The "First Load JS shared by all" decreased by 40.67% (327 kB to 194 kB).

MacBook had the same size reduction and about the same percentage change for build times. 122 s to 111 s (9.01% decrease) for first build and 118 s to 108 s (8.47% decrease).

Going to try this in "prod" for a bit before releasing to make sure I really don't have any side effects other than CSS files since there still isn't a 100% fool-proof way to know this.

See: https://webpack.js.org/guides/tree-shaking/

Summary, new sideEffects field helps with dead code elimination with
webpack and helps build performance since it doesn't need to parse it
with terser.

I tested a really simple example in CRA that was just:

```diff
 import React from "react";
 import logo from "./logo.svg";
+import { Button } from "react-md";
 import "./App.css";

 function App() {
   return (
     <div className="App">
       <header className="App-header">
         <img src={logo} className="App-logo" alt="logo" />
         <p>
           Edit <code>src/App.js</code> and save to reload.
         </p>
+        <Button>Hello</Button>
```

```diff
 import React from "react";
 import ReactDOM from "react-dom";
+import "react-md/dist/css/react-md.blue-teal-400-dark.min.css";
 import "./index.css";
```

Where I'd build with and without the react-md styles being imported. I
think these stats will be negligible once more components are being
used, but here's the few results with my MacBook.

Current build stats:

```sh
 # without css
 # average build time ~12s
File sizes after gzip:

  205.54 KB  build/static/js/2.646bee91.chunk.js
  777 B      build/static/js/runtime-main.b9cd606a.js
  682 B      build/static/js/main.909a8f83.chunk.js
  547 B      build/static/css/main.5f361e03.chunk.css
```

```sh
 # with css
 # average build time ~13s
File sizes after gzip:

  205.54 KB  build/static/js/2.06a718b5.chunk.js
  15.84 KB   build/static/css/2.c416ebf1.chunk.css
  777 B      build/static/js/runtime-main.b9cd606a.js
  685 B      build/static/js/main.5a2d7e96.chunk.js
  547 B      build/static/css/main.5f361e03.chunk.css
```

With `"sideEffects": ["dist/**/*"]`:

```sh
 # without css
 # average build time ~8s
File sizes after gzip:

  45.79 KB (-159.75 KB)  build/static/js/2.5e21dda9.chunk.js
  777 B                  build/static/js/runtime-main.b9cd606a.js
  672 B (-10 B)          build/static/js/main.5c471371.chunk.js
  547 B                  build/static/css/main.5f361e03.chunk.css

 # stats compared to previous without css build
```

```sh
 # with css
 # average build time ~9
File sizes after gzip:

  45.8 KB (-159.75 KB)  build/static/js/2.043fb57c.chunk.js
  15.84 KB              build/static/css/2.c416ebf1.chunk.css
  777 B                 build/static/js/runtime-main.b9cd606a.js
  673 B (-12 B)         build/static/js/main.5e1aaad3.chunk.js
  547 B                 build/static/css/main.5f361e03.chunk.css

 # stats compared to previous with css build
```
Also changed the SimpleListItem due to jsx-a11y/role-supports-aria-props
@codecov-commenter
Copy link

codecov-commenter commented Jun 26, 2020

Codecov Report

Merging #877 into master will increase coverage by 0.02%.
The diff coverage is n/a.

Impacted file tree graph

@@            Coverage Diff             @@
##           master     #877      +/-   ##
==========================================
+ Coverage   88.59%   88.61%   +0.02%     
==========================================
  Files         238      238              
  Lines        6813     6809       -4     
  Branches     1731     1729       -2     
==========================================
- Hits         6036     6034       -2     
  Misses        697      697              
+ Partials       80       78       -2     
Impacted Files Coverage Δ
packages/list/src/SimpleListItem.tsx 100.00% <ø> (+5.40%) ⬆️

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 81264ba...3a1fc89. Read the comment docs.

Updated the sideEffects to be a multiline array since changing
a dependency later will automatically format it this way.
@mlaursen mlaursen merged commit 35c2be3 into master Jun 30, 2020
@mlaursen mlaursen deleted the release/v2.0.2 branch July 7, 2020 19:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants